<script setup lang="ts">
import { computed, ref, type PropType } from 'vue'
import type { MuiCheckStatus } from '../mui-check/type'
import type { IMyPick, IMyTableColumn } from '@/types/global'

const props = defineProps({
  // 当前的item数据
  item: {
    type: Object as PropType<IMyTableColumn>,
    default() {
      return {}
    }
  },
  // 表格数据
  data: {
    type: Array as PropType<any[]>,
    default() {
      return [] as any[]
    }
  },
  // 已选中的数据
  pickList: {
    type: Array as PropType<IMyPick[]>,
    default() {
      return [] as IMyPick[]
    }
  }
})
// 图片前缀
const imgFixUrl = ref(import.meta.env.VITE_FILE_URL)
/**
 * 全选框状态
 */
const allPickStatus = computed(() => {
  // 如果没有数据，则显示未选中
  if (props.data.length === 0) {
    return 'noCheck'
  }
  let flag: MuiCheckStatus = 'noCheck'
  let isAllExist = true // 是否全都存在
  for (let dItem of props.data) {
    let isExist = false // 本次循环是否存在
    for (let pItem of props.pickList) {
      if (dItem.id == pItem.id) {
        flag = 'checking'
        isExist = true
        break
      }
    }
    // 只要有一次不存在，则说明不是全选
    if (!isExist) {
      isAllExist = false
    }
  }
  // 判断是否全选
  if (isAllExist) {
    flag = 'checked'
  }
  return flag
})

/**
 * 获取图片地址列表
 */
function getPreviewList(row: any) {
  // TODO
  return []
}
/**
 * 点击全选
 */
function allPickClick() {
  // 已全选
  if (allPickStatus.value == 'checked') {
    props.pickList.splice(0)
    return
  }
  // 未全选
  props.pickList.splice(0)
  for (let dItem of props.data) {
    props.pickList.push({
      id: dItem.id,
      name: dItem.name,
      origin: dItem
    })
  }
}
/**
 * 点击选中
 */
function pickClick(row: any) {
  // 多选
  if (props.item.multiple) {
    let isExist = false
    for (let i = 0; i < props.pickList.length; i++) {
      if (props.pickList[i].id == row.id) {
        props.pickList.splice(i, 1)
        isExist = true
        break
      }
    }
    if (!isExist) {
      props.pickList.push({ id: row.id, name: row.name, origin: row })
    }
  }
  // 单选
  else {
    if (props.pickList.length === 0) {
      props.pickList.push({ id: row.id, name: row.name, origin: row })
    } else {
      if (props.pickList[0].id == row.id) {
        props.pickList.splice(0)
      } else {
        props.pickList.splice(0)
        props.pickList.push({ id: row.id, name: row.name, origin: row })
      }
    }
  }
}
/**
 * 判断是否选中
 */
function judgeCheckedFunc(row: any): MuiCheckStatus {
  if (props.pickList.find((pItem) => pItem.id == row.id)) {
    return 'checked'
  }
  return 'noCheck'
}
</script>

<template>
  <ElTableColumn
    :align="item.align || 'center'"
    :header-align="item.headerAlign || 'center'"
    :show-overflow-tooltip="item.showOverflowTooltip ?? true"
    v-bind="item"
  >
    <!-- 自定义多选表头 -->
    <template v-if="item.type === 'tableSelect' && item.multiple" #header>
      <div class="dui-check-box">
        <dui-check :status="allPickStatus" @click="allPickClick" multiple />
      </div>
    </template>
    <template #default="scope">
      <!-- 自定义选择框 -->
      <div v-if="item.type === 'tableSelect'" class="dui-check-box">
        <dui-check
          :status="judgeCheckedFunc(scope.row)"
          @click="pickClick(scope.row)"
          :multiple="item.multiple"
          v-bind="item.options ?? {}"
        />
      </div>
      <!-- 图片显示-单张 -->
      <div v-else-if="item.type === 'img'" class="dui-table-img-box">
        <DbImage
          class="dui-table-img"
          fit="cover"
          :src="scope.row[item.prop]"
          :preview-src-list="[imgFixUrl + scope.row[item.prop]]"
          preview-teleported
          v-bind="item.options ?? {}"
        />
      </div>
      <!-- 图片显示-多张 -->
      <div v-else-if="item.type === 'imgs'" class="dui-table-img-box">
        <!-- <template v-for="(imgItem, imgIndex) in scope.row[item.prop] || []" :key="imgIndex">
          <ElImage
            class="dui-table-img"
            fit="cover"
            :src="imgItem"
            :preview-src-list="getPreviewList(scope.row)"
            preview-teleported
          />
        </template> -->
      </div>
      <!-- tag -->
      <template v-else-if="item.type === 'tag'">
        <el-tag :type="item.tagFunc ? item.tagFunc(scope).type : ''" v-bind="item.options ?? {}">{{
          item.tagFunc ? item.tagFunc(scope).label : ''
        }}</el-tag>
      </template>
      <!-- input -->
      <template v-else-if="item.type === 'input'">
        <el-input v-model="scope.row[item.prop]" clearable v-bind="item.options ?? {}" />
      </template>
      <!-- select -->
      <template v-else-if="item.type === 'select'">
        <el-select v-model="scope.row[item.prop]" :multiple="item.multiple" filterable clearable v-bind="item.options ?? {}">
          <el-option v-for="sItem in item.list || []" :key="sItem.value" :label="sItem.label" :value="sItem.value" />
        </el-select>
      </template>
      <!-- text - 格式转换、富文本 -->
      <template v-else-if="item.type === 'text'">
        <div v-html="item.textFunc ? item.textFunc(scope) : scope.row[item.prop]"></div>
      </template>
      <!-- 自定义插槽 -->
      <template v-else-if="item.type === 'slot'">
        <slot :name="item.prop + 'Slot'" v-bind="scope"></slot>
      </template>
    </template>
  </ElTableColumn>
</template>

<style lang="scss" scoped>
.dui-table-img-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 10px;
  row-gap: 10px;

  .dui-table-img {
    width: 50px;
    height: 50px;
    margin: auto;
  }
}
.dui-check-box {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
